<template>
  <div class="container-box">
    <el-container class="main-box">
      <el-header>嗨购后台管理系统 
        <el-button @click="exit">退出登录</el-button>
      </el-header>
      <el-container class="main-box">
        <el-aside width="200px" style="background-color: #545c64">
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
           :default-active="$route.path"
            text-color="#fff"
            :router="true"
          >
            <template v-for="item in currMenuData" :key="item.id">
              <el-menu-item v-if="!item.children" :index="item.path"
                ><span>{{ item.title }}</span></el-menu-item
              >
              <el-sub-menu v-else :index="item.id">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>{{ item.title }}</span>
                </template>
                <el-menu-item
                  v-for="sonItem in item.children"
                  :key="sonItem.id"
                  :index="sonItem.path"
                  >{{ sonItem.title }}</el-menu-item
                >
              </el-sub-menu>
            </template>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";

import { getCurrentMenu } from "@/grants/menuData";
import {allRoutes} from "@/grants/routes"
import {useRouter,useRoute} from "vue-router";

const $route = useRoute();
console.log("$route",$route);

const currMenuData = getCurrentMenu();

const $router = useRouter();
const exit=()=>{
  localStorage.clear();
  sessionStorage.clear();

  // allRoutes.forEach(item=>{
  //   $router.removeRoute(item.name);
  // })
  
  $router.replace("/Login");
  location.reload();
}

</script>

<style scoped lang="scss">
.container-box {
  width: 100%;
  height: 100%;
}

.el-header {
  height: 40px;
  background-color: rgba(37, 97, 239, 1);
}

.main-box {
  height: 100%;
}
</style>, menuDatas, useRouter
